<template>
  <div>
    <div class="w">
      <div class="content">
        <van-tabs sticky offset-top="60px" :animated="true" :swipeable="true">
          <van-tab title="推荐">
            <div class="advertisement">
              <div class="img">
                <img
                  src="../assets/img/advertisement.jpg"
                  width="100%"
                  alt=""
                />
              </div>
              <div class="baom">
                <span>早餐马拉松</span>
                <span>立即报名参加</span>
              </div>
            </div>

            <div class="recommend">
              <div class="texts">
                <h2>为你推荐</h2>
                <span>菜谱分类</span>
              </div>
              <div class="recommend-son">
                <ul>
                  <li
                    @click="ToDetails(item.id)"
                    v-for="(item, index) in recommendLists"
                    :key="index"
                  >
                    <div class="food" @click="btnFlag">
                      <img :src="item.foodImg" height="215px" alt="" />
                    </div>
                    <div class="details">
                      <p>{{ item.foodName }}</p>
                      <p>{{ item.renshu }}人做过</p>
                      <div class="zuoze">
                        <img
                          :src="item.touxiang"
                          width="20px"
                          class="touxiang"
                          alt=""
                        />
                        <span>{{ item.userName }}</span>
                      </div>
                    </div>
                  </li>
                </ul>
              </div>
            </div>
            <div class="baikuai"></div>
          </van-tab>
          <van-tab title="减脂">
            <div class="fat">
              <div
                class="fat-son"
                v-for="(item, index) in coverList"
                :key="index"
                @click="showPopup(item.id)"
              >
                <div
                  class="img"
                  :style="{ 'background-image': 'url(' + item.coverImg + ')' }"
                >
                  <div class="fat-guanggao">
                    <h1>{{ item.hGuanggao }}</h1>
                    <p>{{ item.guanggao }}</p>
                    <p>{{ item.guanggaoTwo }}</p>
                  </div>
                </div>
                <div class="describe">
                  <p class="describe-title">{{ item.coverTitle }}</p>
                  <p class="describe-num">
                    {{ item.foodnums }}道菜谱·{{ item.participatein }}人参与
                  </p>
                </div>
              </div>
              <van-popup
                v-model="show"
                round
                position="bottom"
                :style="{ height: '80%' }"
                get-container="body"
                closeable
              >
                <PopupData></PopupData>
              </van-popup>
            </div>
            <div class="baikuai"></div>
          </van-tab>
          <van-tab title="分类">
            <div class="classification">
              <div class="activity">
                <div class="activity-title">厨房活动</div>
                <div class="activity-list" v-if="activity">
                  <van-swipe :loop="false" :show-indicators="false" :height="243" :width="173">
                    <ul>
                    <van-swipe-item v-for="(item, index) in activity" :key="index">
                      <li>
                      <div class="activity-box">
                        <div class="activity-img">
                          <img :src="item.activityImg1" alt="" />
                        </div>
                        <div class="activity-state">{{ item.activityzt1 }}</div>
                      </div>
                      <div class="activity-box">
                        <div class="activity-img">
                          <img :src="item.activityImg2" alt="" />
                        </div>
                        <div class="activity-state">{{ item.activityzt2 }}</div>
                      </div>
                    </li>
                    </van-swipe-item>
                    </ul>
                  </van-swipe>
                </div>
              </div>

              <div class="square">
                <div class="square-title">作品广场</div>
                <div class="square-works">
                  <div class="square-img">
                    <img src="../assets/img/cyb.jpg" alt="" />
                  </div>
                  <div class="square-text">
                    <p>家常葱油饼柔软多层凉了也不硬附细节 视频详解</p>
                  </div>
                </div>
              </div>

              <div class="classification-son" v-if="classification">
                <div class="popularity" v-for="(item,index) in classification" :key="index">
                  <div class="popularity-title">{{item.titel}}</div>
                  <div class="popularity-list">
                    <ul>
                      <li v-for="k in item.popularity" :key="k.id" @click="CategoryPage(k.id)">
                        <div class="popularity-img">
                          <img :src="k.popularityImg" alt="" />
                        </div>
                        <div class="popularity-name">{{k.name}}</div>
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
            <div class="baikuai"></div>
          </van-tab>
          <van-tab title="关注">
            <div class="follow">
              <div class="follow-title">作品推荐</div>
              <div
                class="follow-content"
                v-for="(item, index) in followList"
                :key="index"
              >
                <div class="follow-user">
                  <div class="username">
                    <div class="img">
                      <img :src="item.touxiang" width="36" alt="" />
                    </div>
                    <p>{{ item.userName }}</p>
                  </div>
                  <div class="follow-btn">
                    <button>关注</button>
                    <span>...</span>
                  </div>
                </div>
                <div class="follow-son">
                  <p>{{ item.works }}</p>
                  <div class="pics">
                    <div class="pic" v-for="k in item.worksImg" :key="k">
                      <img
                        :src="k"
                        :width="item.worksImg.length >= 2 ? 105 : 220"
                      />
                    </div>
                  </div>
                  <div class="fabulousOfComment">
                    <div class="fabulous" @click="fabulousBtn(item.id)">
                      <span
                        class="iconfont icon-dianzan1"
                        style="color: balck"
                        ref="zan"
                      ></span>
                      <span>{{ item.fabulous }}</span>
                    </div>
                    <div @click="commentBtn(item.id)" class="comment">
                      <span class="iconfont icon-qipao"></span>
                      <span>{{
                        item.comment == 0 ? "评论" : item.comment
                      }}</span>
                    </div>
                  </div>
                  <div class="article">
                    <p v-for="(x, index) in item.article" :key="index">
                      {{ x.names }}
                      <span>{{ x.content }}</span>
                    </p>
                    <p class="nums" v-if="item.comment != 0">
                      共{{ item.comment }}条评论
                    </p>
                    <p class="times">{{ item.times }}</p>
                  </div>
                </div>
              </div>
            </div>
            <div class="baikuai"></div>
          </van-tab>
        </van-tabs>
      </div>
    </div>
  </div>
</template>

<script>
import { recommendData } from "../api/home.js";
import PopupData from "../components/popupData.vue";
export default {
  props: ["collectionList"],
  data() {
    return {
      recommendLists: null,
      tabList: null,
      followList: null,
      show: false,
      followListId: null,
      coverList: null,
      historyList: [],
      numss: 0,
      activity: null,
      classification:null
    };
  },
  methods: {
    btnFlag() {
      this.$emit("btnFlag");
    },
    showPopup(id) {
      this.show = true;
      window.localStorage.setItem("fatId", JSON.stringify(id));
    },
    ToDetails(id) {
      let dianj = this.recommendLists.filter((item) => item.id == id)[0];

      this.historyList.forEach((item) => {
        if (item.id == id) {
          console.log(this.historyList);
          console.log(1);
          this.numss++;
        } else {
          console.log(2);
          return this.numss;
        }
      });

      if (this.numss == 0) {
        this.historyList.push(dianj);
      }
      window.localStorage.setItem(
        "historyList",
        JSON.stringify(this.historyList)
      );

      if (this.collectionList.length == 0) {
        this.$router.push({
          path: "detailsView",
          query: {
            id,
            zhuantai: false,
          },
        });
      } else {
        for (let i = 0; i < this.collectionList.length; i++) {
          if (this.collectionList[i].id == id) {
            console.log(1);
            this.$router.push({
              path: "detailsView",
              query: {
                id,
                zhuantai: true,
              },
            });
            break;
          } else {
            console.log(2);
            this.$router.push({
              path: "detailsView",
              query: {
                id,
                zhuantai: false,
              },
            });
          }
        }
      }
    },

    fabulousBtn(id) {
      let index = this.followList.findIndex((item) => item.id == id);
      if (this.$refs.zan[index].style.color == "red") {
        this.$refs.zan[index].style.color = "black";
        this.followList[index].fabulous -= 1;
      } else {
        this.$refs.zan[index].style.color = "red";
        this.followList[index].fabulous += 1;
      }
    },
    commentBtn(id) {
      let index = this.followList.findIndex((item) => item.id == id);
      let fabulous = this.followList[index].fabulous;
      let zhuantai = this.$refs.zan[index].style.color;
      this.$emit("commentBtn");
      this.$router.push({
        path: "commentView",
        query: {
          id,
          fabulous,
          zhuantai,
        },
      });
    },

    CategoryPage(id){
      this.$emit("CategoryPage")
      console.log(id);
      this.$router.push({path:'classificationView',query:{
        id,
      }})
    }
  },
  created() {
    if (localStorage.historyList) {
      this.historyList = JSON.parse(window.localStorage.getItem("historyList"));
    }
    recommendData().then((data) => {
      this.recommendLists = data.recommendLists;
      this.followList = data.follow;
      this.coverList = data.coverLists;
      this.activity = data.activity;
      this.classification=data.classification
    });

    // console.log(window.location.href);
  },
  components: { PopupData },
};
</script>

<style lang="scss">
@import "../assets/css/index.scss";
</style>    